import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/Addons.js";

//加载纹理
//声明加载器实例
const textureLoader = new THREE.TextureLoader();
//加载器加载纹理，参数是图片路径
//颜色纹理
const colorTexture = textureLoader.load("src/assets/textures/door/color.jpg");
//透明纹理
const alphaTexture = textureLoader.load("src/assets/textures/door/alpha.jpg");
const heightTexture = textureLoader.load("src/assets/textures/door/height.jpg");
const normalTexture = textureLoader.load("src/assets/textures/door/normal.jpg");
//环境光遮蔽
const ambientOcclusionTexture = textureLoader.load(
  "src/assets/textures/door/ambientOcclusion.jpg"
);
//金属性
const metalnessTexture = textureLoader.load(
  "src/assets/textures/door/metalness.jpg"
);
//粗糙度
const roughnessTexture = textureLoader.load(
  "src/assets/textures/door/roughness.jpg"
);
const matcapsTexture = textureLoader.load("src/assets/textures/matcaps/1.png");
//渐变
const gradientsTexture = textureLoader.load(
  "src/assets/textures/gradients/3.jpg"
);

const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

//监听窗口变化事件
window.addEventListener("resize", () => {
  //   console.log(window.innerWidth);
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  //调整相机
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix(); //更新相机

  //调整渲染器
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

//创建第一个场景
const scene = new THREE.Scene();

const group = new THREE.Group();
scene.add(group);
//创建物体
//材质
const material = new THREE.MeshBasicMaterial();
material.transparent = true;
material.alphaMap = alphaTexture;
material.side = THREE.DoubleSide;

//球体
const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.5, 16, 16), material);
sphere.position.x = 0;
group.add(sphere);

//平面
const plane = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), material);
plane.position.x = -3;
group.add(plane);

//圆环体
const tours = new THREE.Mesh(
  new THREE.TorusGeometry(0.3, 0.2, 16, 32),
  material
);
tours.position.x = 3;
group.add(tours);

//创建摄像机
const camera = new THREE.PerspectiveCamera(60, sizes.width / sizes.height);
//相机位置
camera.position.z = 5;

camera.lookAt(group.position);

// 将相机加入场景
scene.add(camera);

//创建渲染器材
const renderer = new THREE.WebGLRenderer();
renderer.setSize(sizes.width, sizes.height);
document.body.appendChild(renderer.domElement);

//控制器
//两个参数 要控制的相机 参考点--一般是渲染的画布
const controls = new OrbitControls(camera, renderer.domElement);
// 如果开启了阻尼，需要每帧都更新控制器
controls.enableDamping = true;

const clock = new THREE.Clock();

const change = () => {
  let elapsedTime = clock.getElapsedTime();
  sphere.rotation.y = 0.1 * elapsedTime;
  plane.rotation.y = 0.1 * elapsedTime;
  tours.rotation.y = 0.1 * elapsedTime;

  sphere.rotation.x = 0.15 * elapsedTime;
  plane.rotation.x = 0.15 * elapsedTime;
  tours.rotation.x = 0.15 * elapsedTime;

  controls.update();
  renderer.render(scene, camera);
  window.requestAnimationFrame(change);
};
change();
